<template>
  <div class="mypage1">
    <div class="mainleft">
      <div class="lefttop">
        <div class="topleft">
          <div class="mytitle">生产完成率</div>
          <el-button type="warning" @click="handleFather">调用父组件</el-button>
          <div class="block1">
            <div class="gauge1" id="mychart1"></div>
            <div class="content1">
              <div class="con"></div>
              <div class="con"></div>
              <div class="con"></div>
            </div>
          </div>
        </div>
        <div class="topright" id="mychart2">3333</div>
      </div>
      <div class="leftbottom">22</div>
    </div>
    <div class="mainright">
      <div class="rightitem">1</div>
      <div class="rightitem">2</div>
      <div class="rightitem">3</div>
    </div>
  </div>
</template>

<script>
export default {
name: "page1",
  data(){
    return{
      list:[
        {a:'111', b:'222'},
        {a:'aaa', b:'bbb'}
        ]
    }
  },
  mounted() {
    this.drawGuage();
    this.drawGuage2();
  },
  props: [
    'options'//父组件传递过来的数据
  ],
  methods:{
    handleFather(){
      console.log("我是子组件")
      this.$emit('myfather',this.list);
    },
    myson(){
      console.log("子组件调用啦")
    },
    drawGuage(){
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('mychart1'))
      //绘制图表
      myChart.setOption({
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: '业务指标',
            type: 'gauge',
            detail: {
              formatter: '{value}%',
              backgroundColor: 'rgba(30,144,255,0.8)',
              borderWidth: 1,
              width:5,
              height:5,
              borderColor: '#fff',
              shadowColor: '#fff', //默认透明
              shadowBlur: 5,
            },
            data: [{value: 30, name: '完成率'}],
            axisLine: {            // 坐标轴线
              lineStyle: {       // 属性lineStyle控制线条样式
                color: [[0.2, 'lime'], [0.6, '#1e90ff'], [1, '#ff4500']],
                width: 3,
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            axisLabel: false,

          }
        ]
      });
    },
    drawGuage2(){
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('mychart2'))
      //绘制图表
      myChart.setOption({
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: '业务指标',
            type: 'gauge',
            detail: {
              formatter: '{value}%',
              backgroundColor: 'rgba(30,144,255,0.8)',
              borderWidth: 1,
              width:5,
              height:5,
              borderColor: '#fff',
              shadowColor: '#fff', //默认透明
              shadowBlur: 5,
            },
            data: [{value: 30, name: '完成率'}],
            axisLine: {            // 坐标轴线
              lineStyle: {       // 属性lineStyle控制线条样式
                color: [[0.2, 'lime'], [0.6, '#1e90ff'], [1, '#ff4500']],
                width: 3,
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            axisLabel: false,

          }
        ]
      });
    },
  }
}
</script>

<style scoped>
.mytitle{
  margin: 5%;
  padding: 2%;
  box-shadow: 0 0 10px purple;
}
.mypage1{
  height: 80vh;
  margin: 1%;
  margin-top: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.mainleft {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.lefttop{
  height: 45%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.topleft{
  flex: 1;
  margin-right: 1.5%;
  background-color: lightgray;
}
.topright {
  background-color: lightgray;
}
.block1 {
  height: 70%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.gauge1{
  width: 60%;
}
.content1{
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.con{
  flex: 1;
  border-radius: 2px;
  margin: 1%;
  background-color: lightgrey;
}
.topright{
  flex: 2;
}
.leftbottom{
  margin-top: 1.5%;
  background-color: lightgray;
  height: 53%;
}
.mainright{
  margin-left: 1%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.rightitem {
  flex: 1;
  background-color: lightgray;
}
.rightitem:nth-child(2){
  margin: 3% 0;
}
</style>
